<route>
{
    meta: {
        enabled: false
    }
}
</route>
<template>
    <div>
        <page-header title="文章列表" />
        <page-main>
            <!-- 搜索开始 -->
            <el-row>
                <el-col :md="24" :lg="4" class="mb-20">
                    <el-select
                        v-model="queryInfo.category"
                        size="large"
                        clearable
                        placeholder="分类"
                        @clear="handleCurrentChange(1)"
                    >
                        <el-option
                            v-for="item in cateOptions"
                            :key="item.id"
                            :label="item.label"
                            :value="item.label"
                        />
                    </el-select>
                </el-col>
                <el-col :md="24" :lg="4" class="mb-20">
                    <el-select
                        v-model="queryInfo.status"
                        size="large"
                        clearable
                        placeholder="状态"
                        @clear="handleCurrentChange(1)"
                    >
                        <el-option
                            v-for="item in statusOptions"
                            :key="item.id"
                            :label="item.label"
                            :value="item.status"
                        />
                    </el-select>
                </el-col>
                <el-col :md="24" :lg="16">
                    <el-row>
                        <el-button
                            type="primary"
                            class="mb-20"
                            size="large"
                            @click="handleCurrentChange(1)"
                        >
                            筛选
                        </el-button>
                        <el-button
                            type="primary"
                            class="mb-20"
                            size="large"
                            @click="
                                $router.push({ name: 'articleMangerPublish' })
                            "
                        >
                            发表文章
                        </el-button>
                    </el-row>
                </el-col>
            </el-row>
            <!-- 搜索结束 -->

            <!-- 表格开始 -->
            <el-table :data="tableData" border stripe style="width: 100%;">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="title" label="标题" />
                <el-table-column prop="name" label="作者" width="200" />
                <el-table-column prop="category" label="分类" width="180" />
                <el-table-column prop="datatime" label="发表时间" width="220" />
                <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                        <el-tag
                            v-if="scope.row.status"
                            type="success"
                            size="small"
                            effect="plain"
                        >
                            已发布
                        </el-tag>
                        <el-tag
                            v-else
                            type="danger"
                            size="small"
                            effect="plain"
                        >
                            未发布
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120">
                    <template #default="scope">
                        <el-link
                            v-if="scope.row.status"
                            :underline="false"
                            type="primary"
                            class="mr-10"
                            @click="
                                $router.push({
                                    name: 'articleMangerDetail',
                                    query: scope.row,
                                })
                            "
                        >
                            查看
                        </el-link>
                        <el-link
                            v-else
                            :underline="false"
                            type="primary"
                            class="mr-10"
                            @click="
                                $router.push({
                                    name: 'articleMangerEdit',
                                    query: scope.row,
                                })
                            "
                        >
                            编辑
                        </el-link>
                        <el-link
                            :underline="false"
                            type="primary"
                            @click="removeArticlesDataById(scope.row)"
                        >
                            删除
                        </el-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 表格结束 -->

            <!-- 分页开始 -->
            <el-pagination
                class="hidden-md-and-down mt-20"
                :current-page="queryInfo.page"
                :page-sizes="[1, 2, 5, 10]"
                :page-size="queryInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />

            <el-pagination
                class="hidden-lg-and-up mt-20"
                layout="prev, pager, next"
                :total="total"
            />
            <!-- 分页结束 -->
        </page-main>
    </div>
</template>

<script setup name="articleMangerList">
import { list, deletes } from '@/api/articles'
import 'element-plus/theme-chalk/display.css'
import { ref } from 'vue'

const cateOptions = reactive([
    {
        id: '1',
        label: '黄金糕'
    },
    {
        id: '2',
        label: '双皮奶'
    },
    {
        id: '3',
        label: '蚵仔煎'
    },
    {
        id: '4',
        label: '龙须面'
    },
    {
        id: '5',
        label: '北京烤鸭'
    }
]) // 分类
const statusOptions = reactive([
    {
        id: '1',
        status: false,
        label: '未发布'
    },
    {
        id: '2',
        status: true,
        label: '已发布'
    }
]) // 状态
const tableData = ref([]) // 列表数据
const queryInfo = ref({ page: 1, pageSize: 10, status: '', category: '' }) // 列表请求参数
const total = ref(0) // 总条数

onMounted(() => {
    getArticlesListData()
})

/**
 * @description: 获取首页列表数据
 * @param {*}
 * @return {*}
 * @author: Yu
 */
const getArticlesListData = async() => {
    const { data: res }  = await list(queryInfo.value)
    tableData.value = res.tableData
    total.value = res.total
}

/**
 * @description: 通过id删除文章
 * @param {*}
 * @return {*}
 * @author: Yu
 */
const removeArticlesDataById = row => {
    ElMessageBox.confirm(
        '此操作将永久删除该文章, 是否继续?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
        .then(async() => {
            const res = await deletes(row)    
            ElMessage({
                type: 'success',
                message: res.message
            })
            getArticlesListData()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除'
            })
        })
}

/**
 * @description: 监听 pageSize 改变的事件
 * @param {*} newSize
 * @return {*}
 * @author: Yu
 */
function handleSizeChange(newSize) {
    queryInfo.value.pageSize = newSize
    getArticlesListData()
}

/**
 * @description: 监听 page 改变的事件
 * @param {*} newPage
 * @return {*}
 * @author: Yu
 */
function handleCurrentChange(newPage) {
    queryInfo.value.page = newPage
    getArticlesListData()
}
</script>
